
const TodoList = (props) => {
    let { todos, del, onCheck } = props;
    //通过数据,创建li结构

    //checkbox状态改变
    let handleCheckChange = (id, e) => {

        onCheck(id, e.target.checked)
    }
    const handleClose = (target) => {
        del(target.id)
    }
    let lis = todos.map(item => {
        let completedClassName = item.completed ? 'completed' : ''
        return (
            <li key={item.id} className={"todos-item " + completedClassName}>
                    <input type="checkbox" onChange={
                        (e) => {
                            handleCheckChange(item.id, e)
                        }
                    } checked={item.completed} />
                <b className="content">{item.content}</b>
                <div className='close'>
                    <b className="box-b" onClick={() => {
                        handleClose(item)
                    }}>×</b>
                </div>
                </li>
        )
    })
    return (
        <ul className="todolist">
            {lis}
        </ul>
    )
}

export default TodoList